<template>
  <div class="container">
    <div class="scroll">
      <NavBar>
        <div slot="left" class="back" @click="back">
          <div><img src="../../../assets/image/back.png"></div>
        </div>
        <div slot="center">我的打卡记录</div>
      </NavBar>
      <div class="detail" v-for="(item,i) in infos">
        <div class="detail-item" @click="moveTo(i)">
          <div class="name">
            <div v-if="item.time.split('T')[1].split(':')[0]<12"><img src="../../../assets/image/上午.png"></div>
            <div v-else><img src="../../../assets/image/下午.png"></div>
            <div>{{ item.time.split('T')[1].split(':')[0] < 12 ? '上午' : '下午' }}</div>
          </div>
          <div class="detail-item1">
            <div class="loc">
              <div class="img"><img src="../../../assets/image/地点.png"></div>
              <div>{{ item.address }}</div>
            </div>
            <div class="time">
              <div class="img"><img src="../../../assets/image/时间.png"></div>
              <div> {{ item.time.split('T')[0] }}</div>
            </div>
          </div>
          <div class="more">
            <img src="../../../assets/image/向右.png" alt=""/>
          </div>
        </div>
      </div>
      <div class="block"></div>
      <maintabbar/>
    </div>
  </div>
</template>

<script>
import maintabbar from "../maintabbar/maintabbar";
import {requestAllInfo, requestGetLocation} from "../../../network/request";
import NavBar from "../../common/navbar/NavBar";
import {formatNumber} from '../../../utils/util'

export default {
  name: "all",
  data() {
    return {
      infos: [],
      token: '',
      loc: [],
      name: ['张三', '李四', '王五', '小李', '小明', '小红'],
      day: ''
    }
  },
  computed: {
    getTime() {
      return (e) => {
        let time = e.begin
        time = JSON.stringify(time)
        let info = time.split('T')[0]
        return info.replace('"', '')
      }
    },
  },
  components: {
    maintabbar,
    NavBar
  },
  mounted() {
    let date = new Date()
    let day = date.getFullYear() + '-' + formatNumber(parseInt(date.getMonth() + 1)) + '-' + formatNumber(date.getDate())
    let that = this
    that.day = day
    let token = localStorage.getItem('token')
    that.token = token
    requestAllInfo(token).then(res => {
      that.infos = res.data.obj
      console.log(that.infos)
      console.log(that.infos[0].time.split('T')[1].split(':'))

      for (let i = 0; i < res.data.obj.length; i++) {
        // requestGetLocation(res.data.obj[i]).then(res1 => {
        //   let city = res1.data.regeocode.addressComponent.city
        //   let province = res1.data.regeocode.addressComponent.province
        //   that.loc.push(province + ' ' + city)
        // })
        that.loc.push(res.data.obj.address)
      }
    })
  },
  methods: {
    back() {
      this.$router.push('profile')
    },
    moveTo(e) {
      let that = this
      localStorage.setItem('employ', JSON.stringify(that.infos[e]))
      this.$router.push({
        path: 'detail',
        query: {
          info: that.infos[e]
        }
      })
    }
  }

}
</script>

<style scoped>
.container {
  background-image: url("../../../../src/assets/image/background.png");
  height: 100vh;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.block {
  height: 70px;
}

.scroll {
  height: 100%;
  overflow: scroll;
}

.pppp {
  font-size: 20px;
}

.name {
  display: flex;
  flex-direction: row;
  font-size: 22px;
  white-space: nowrap;
  align-items: center;
  margin-left: 10px;
}

.name img {
  height: 32px;
  width: 32px;
}

.time {
  display: flex;
  flex-direction: row;
  color: black;
  margin-top: 10px;
}

.img {
  margin-top: 3px;
  margin-right: 5px;
}

.detail {
  display: flex;
  flex-direction: row;
  /*margin-bottom: 30px;*/
}

.loc {
  display: flex;
  flex-direction: row;
  color: blue;
  align-items: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 120px;
}

.detail-item {
  background-color: rgba(255, 255, 255, 0.5);
  width: 90%;
  height: 70px;
  border-radius: 20px;
  margin: 10px 5%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.detail-item1 {
  display: flex;
  flex-direction: column;
  /*align-items: center;*/
  justify-content: space-around;
  margin-left: 90px;
  text-align: center;
}

.detail-item1 div {
  align-items: center;
}

.detail-item1 div img {
  width: 18px;
  height: 18px;
}

.more {
  display: flex;
  align-items: center;
  text-align: center;
  color: #B29999;
}

.more img {
  width: 30px;
  height: 30px;
}
</style>
